<template>
  <div>
    <el-space>
      <el-input v-model.trim="title" placeholder="输入商品名称" clearable />
      <el-input v-model.trim="barcode" placeholder="输入商品条形码" clearable />
      <el-select placeholder="选择商品状态" v-model="status" clearable>
        <el-option
          v-for="item in stuts"
          :label="item.name"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
      <div class="example-block">
        <el-cascader
          :options="options"
          :props="props1"
          placeholder="请选择类目"
          v-model="categoryId"
          clearable
        />
      </div>
      <el-button type="primary" class="iconfont icon-sousuo" @click="chazhao()"
        >查找</el-button
      >
      <el-button
      :v-permission="'product:groupshop:created'"
        type="primary"
        class="iconfont icon-tianjia"
        @click="addCoupons()"
        >添加</el-button
      >
    </el-space>
    <div class="box2">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="selection"> </el-table-column>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.skuList" border style="width: 100%">
              <el-table-column prop="barCode" label="商品条码" align="center" />
              <el-table-column prop="title" label="商品规格" align="center" />
              <el-table-column prop="stock" label="商品库存" align="center" />
              <el-table-column
                prop="originalPrice"
                label="原价"
                align="center"
              />
              <el-table-column prop="price" label="现价" align="center" />
              <el-table-column prop="vipPrice" label="VIP价格" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="商品ID" align="center" />
        <el-table-column prop="title" label="名称" align="center" />
        <el-table-column prop="address" label="图片" align="center">
          <template #default="scope">
            <el-image :src="scope.row.img"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="商品详细介绍" align="center">
          <template #default="scope">
            <el-button type="primary" @click="check(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="categoryId" label="类目ID" align="center" />
        <el-table-column
          prop="freightTemplateId"
          label="邮费模版ID"
          align="center"
        />
        <el-table-column prop="sales" label="销量" align="center" />
        <el-table-column prop="unit" label="单位" align="center" />
        <el-table-column prop="address" label="是否在售" align="center">
          <template #default="props">
            <el-tag :type="props.row.status == 1 ? 'warning' : 'plain'">{{
              props.row.status == 1 ? "在售" : "未售"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column label="操作" align="center" width="170px">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleDelete(scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              :type="scope.row.status ? 'success' : 'warning'"
              size="small"
              @click="handleEdit(scope.row)"
              >{{ scope.row.status ? "下架" : "上架" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 图片详情页 -->
      <el-dialog v-model="imgInformation" title="图片详情页" width="55%">
        <div v-html="cont" style="text-align: center"></div>
      </el-dialog>
      <!-- 分页组件 -->
      <PaginAtion
        class="dins"
        v-bind="paging"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </PaginAtion>
    </div>
  </div>
</template>
<script>
  import moment from "moment";
  import http from "@/http";
  import PaginAtion from "@/Subassembly/PaginAtion";
  import zhCn from "element-plus/lib/locale/lang/zh-cn";
  import { ElMessage } from "element-plus";
  import router from "@/router";
  export default {
    components: {
      PaginAtion,
    },
    data() {
      return {
        imgInformation: false, //图片详情
        tableData: [],
        categoryId: "", //
        title: "", //商品标题
        barcode: "", //条形码
        status: "", //状态
        options: [],
        props1: {
          children: "childrenList",
          label: "title",
          value: "id",
          checkStrictly: true,
          emitPath: false,
        },

        //分页
        paging: {
          page: 1, //默认第一页
          limit: 10, //显示一行几页
          total: "", //总页
        },
        //添加

        //商品状态
        stuts: [
          {
            value: 1,
            name: "在售",
          },
          {
            value: 0,
            name: "未售",
          },
        ],
      };
    },
    created() {
      this.commodities(); //商品管理
      this.category(); //类目
    },
    methods: {
      commodities() {
        let data = {
          _gp: "admin.product",
          _mt: "list",
          categoryId: this.categoryId,
          title: this.title,
          barcode: this.barcode,
          status: this.status,
          page: this.paging.page,
          limit: this.paging.limit,
        };
        http.post(data).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            this.tableData = res.data.items;
            this.paging.total = res.data.total;
          }
        });
      },
      addCoupons() {
        // console.log(this.$router);
        this.$router.push({ name: "commod" });
      },
      handleDelete(id){
        this.$router.push(
          {
             name: "editor",
             query:{id}
          }
          );
      },
      //查找
      chazhao() {
        this.commodities();
      },
      //类目
      category() {
        let leimu = {
          _gp: "admin.category",
          _mt: "categoryTree",
        };
        http.post(leimu).then((res) => {
          console.log(res);
          this.options = res.data;
        });
      },
      //上架下架
      handleEdit(row) {
        this.imgInformation = true;
        // console.log(row);
        let statu = {
          _gp: "admin.product",
          _mt: "freezeOrActivation",
          spuId: row.id,
          status: row.status ? "0" : "1",
        };
        http.post(statu).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            ElMessage.success("配置成功！");
          } else {
            ElMessage.error(res.errmsg);
          }
        });
      },
      //查看
      check(item) {
        this.imgInformation = true;
        console.log(item);
        let checks = {
          _gp: "admin.product",
          _mt: "detail",
          spuId: item.id,
        };
        http.post(checks).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            this.cont = res.data.detail;
            console.log(this.cont);
          }
        });
      },
      //分页
      handleSizeChange(val) {
        this.paging.limit = val;
        this.commodities();
      },
      handleCurrentChange(val) {
        this.paging.page = val;
        this.commodities();
      },
    },
  };
</script>
<style lang="less" scoped>
  .box2 {
    margin-top: 13px;
  }
</style>
